<template>
    <div class="folder" :class="{'show' : show, 'active' : DOC_ACTIVE_ID == folderValue.id }">
        <div class="folder-name" @mousedown="keyDown($event)" @mouseup="keyUp($event)">
            <div class="icon">
                <i class="el-icon-arrow-right"></i>
            </div>
            <div class="folder-title" slot="reference">{{folderValue.title}}</div>
        </div>
        <div class="moveLineBox" v-if="markSetting.status">
            <div class="TopMoveMark" @mouseover.stop="mouseover('TopMoveMark')" @mouseout.stop="mouseout">
                <moveLine v-if="TopMoveMark && markSetting.moveValue && folderValue.id == markSetting.moveValue.id"></moveLine>
            </div>
            <div class="BottomMoveMark" @mouseover.stop="mouseover('BottomMoveMark')" @mouseout.stop="mouseout">
                <moveLine v-if="BottomMoveMark && markSetting.moveValue && folderValue.id == markSetting.moveValue.id"></moveLine>
            </div>
            <div class="intoFolder" :style="{ 'top' : markSetting.type == 'doc' ? '0px' : '25%', 'height' : markSetting.type == 'doc' ? '100%' : '50%' }" @mouseover.stop="mouseover('intoFolder')" @mouseout.stop="mouseout"></div>
        </div>
        <el-collapse-transition>
            <div v-show="show" ref="treeScroll">
                <div class="folder-list">
                    <folder v-for="item in folderValue.folderList" :key="item.id" :openParentFolder="openFolder" :folderValue="item"></folder>
                </div>
                <div class="folder-api">
                    <file v-for="item in folderValue.docList" :key="item.id" :openParentFolder="openFolder" :apiValue="item"></file>
                </div>
                <div class="empty" v-if="folderValue.folderList ? (!folderValue.folderList.length && !folderValue.docList.length) : false">(空)</div>
            </div>
        </el-collapse-transition>
    </div>
</template>

<script>
import { mapState } from "vuex";
import file from "./file"
import moveLine from "./moveLine"


export default {
    components: {
        file,
        moveLine,
    },
    props: ['folderValue', 'openParentFolder'],
    data() {
        return {
            show: false,
            TopMoveMark: false,
            BottomMoveMark: false,
            timer: null,
        }
    },
    name: 'folder',
    computed: {
        ...mapState("doc_tree", {
            DOC_ACTIVE_ID: state => state.DOC_ACTIVE_ID,
            markSetting: state => state.markSetting,
            closeAllFolder: state => state.closeAllFolder,
            markSettingStatus: state => state.markSetting.status
        }),
    },
    watch: {
        markSettingStatus: function (newVal, oldVal) {
            if (!newVal && this.timer) {
                clearTimeout(this.timer);
                this.timer = null;
            }
        },
        closeAllFolder: function (newVal, oldVal) {
            this.show = false;
        },
    },
    methods: {
        mouseover(type) {
            var _this = this;
            if (this.markSetting.status) {
                if (this.markSetting.moveObject.id != this.markSetting.moveValue.id) {
                    if (!this.timer) {
                        this.timer = setTimeout(function () {
                            _this.show = true;
                            _this.timer = null;
                        }, 1500);
                    };
                };
                this.TopMoveMark = false;
                this.BottomMoveMark = false;
                this[type] = true;
                this.$store.dispatch('doc_tree/setMoveValue', {
                    type: type,
                    value: this.folderValue,
                    moveValueType: 'folder'
                });
            };
        },
        mouseout() {
            if (this.timer) {
                clearTimeout(this.timer);
                this.timer = null;
            };
            if (this.markSetting.status) {
                this.$store.dispatch('doc_tree/setMoveOut');
            };
        },
        openFolder() {
            this.show = true;
            if (this.openParentFolder) {
                this.openParentFolder();
            };
        },
        keyDown(event) {
            let X = event.clientX;
            let Y = event.clientY;
            document.onmousemove = (event) => {
                if (!this.markSetting.status) {
                    if (Math.abs(X - event.clientX) > 10 || Math.abs(Y - event.clientY) > 10) {
                        this.$store.dispatch('doc_tree/setMoveStatus', {
                            type: 'folder',
                            moveObject: this.folderValue,
                        });
                        this.show = false;
                    };
                };
                this.$store.dispatch('doc_tree/setMoveSetting', {
                    x: event.clientX + 30,
                    y: event.clientY + 10,
                });
            };
            document.onmouseup = () => {
                this.$store.dispatch('doc_tree/clearMoveMark')
                if (this.markSetting.status) {
                    this.$store.dispatch('doc_tree/checkMove');
                }
                this.TopMoveMark = false;
                this.BottomMoveMark = false;
                document.onmousemove = null;
                document.onmouseup = null;
            };
        },
        keyUp(event) {
            if (event.button == 0) {
                this.show = !this.show;
                this.$store.dispatch('doc_tree/setActiveId', this.folderValue.id)
            } else if (event.button == 2) {
                this.$store.dispatch('doc_tree/closeShellMenu');
                this.$nextTick(() => {
                    this.$store.dispatch('doc_tree/showShellMenu', {
                        type: 'folder',
                        option: { X: event.clientX, Y: event.clientY },
                        object: this.folderValue
                    })
                });
            }
        },
    },
}
</script>

<style>

</style>